<template>
  <div class="franchisee">
    <el-form
      ref="form"
      :inline="true"
      :model="form"
      class="search-form"
    >
      <el-form-item label="手机号码:">
        <el-input
          size="small"
          v-model="form.phone"
          placeholder="手机号码"></el-input>
      </el-form-item>
      <el-form-item label="代理商名称:">
        <el-input
          size="small"
          v-model="form.company"
          placeholder="代理商名称"></el-input>
      </el-form-item>
      <el-form-item label="用户名称:">
        <el-input
          size="small"
          v-model="form.username"
          placeholder="用户名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          @click="search(1)"
        >
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <div class="operate-bar">
      <el-button
        v-if="gradeOrigin === 3"
        size="small"
        @click="editFranchisee({})"
      >
        新增代理商
      </el-button>
    </div>
    <el-table
      ref="table"
      :data="tableData"
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column
        prop="id"
        label="ID"
        width="90"
      >
      </el-table-column>
      <el-table-column
        prop="company"
        label="代理商名称"
      >
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名称"
      >
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号码"
        width="140"
      >
      </el-table-column>
      <el-table-column
        label="地区"
      >
        <template slot-scope="prop">
          <span>{{prop.row.province + '' + prop.row.city}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="创建时间"
      >
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        width="75"
      >
        <template slot-scope="prop">
          <span>{{prop.row.state === 1 ? '正常' : '停用'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="gradeOrigin === 3"
        label="操作"
      >
        <template slot-scope="prop">
          <el-button
            :type="prop.row.state === 1 ? 'danger' : 'primary'"
            size="small"
            @click="switchState(prop.row)"
          >{{prop.row.state === 1 ? '停用' : '启用'}}
          </el-button>
          <el-button
            type="plain"
            size="small"
            @click="editFranchisee(prop.row)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        :page-size.sync="form.size"
        :current-page.sync="form.page"
        :total="total"
        :hide-on-single-page="true"
        @current-change="search"
      >
      </el-pagination>
    </div>

    <franchisee-edit></franchisee-edit>
  </div>
</template>

<script>
  import {pageSize} from "../../constant";
  import franchiseeEdit from './parts/edit'
  import {mapGetters} from 'vuex'

  export default {
    name: "index"
    , data() {
      return {
        form: {
          size: pageSize,
          page: 1,
          phone: '',
          company: '',
          username: ''
        },
        total: 0,
        tableData: [],
        loading: false
      }
    },
    computed: {
      ...mapGetters([
        'gradeOrigin'
      ])
    }
    , mounted() {
      this.search(1)
      this.$bus.$on('franchisee-init', () => {
        this.getList()
      })
    }
    , methods: {
      search(page) {
        this.form.page = page
        this.getList()
      },
      getList() {
        this.loading = true
        this.$axios.get('/api/v1/agents', {
            params: this.form
            , abort: true
          })
          .then(res => {
            let {total = 0, data = []} = res
            this.total = total
            this.tableData = data
          })
          .catch(() => {

          })
          .finally(() => {
            this.loading = false
          })
      },
      switchState(row) {
        let action = row.state === 1 ? '停用' : '启用'

        this.$confirm(`是否确认 ${action} ${row.username}?`, '操作提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          })
          .catch(() => {

          })
      },
      editFranchisee(user) {
        this.$bus.$emit('franchisee-edit', user)
      }
    },
    components: {
      franchiseeEdit
    }
  }
</script>

<style scoped>

</style>
